<!-- 
*   @Description:Echarts的封装
*   @Author:lxy
*   @Date:2023-03-23 10:23
-->
<template>
  <div class="charts" ref="chartsRef" style="width: 1570px;"></div>   
</template>

<script>
export default {
  name: "echartsTemplate",
  props: {
    option: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    this.init()
    window.addEventListener("resize", this.echartsResize)
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.echartsResize); 
    if (this.option.group) {
      this.$echarts.disconnect(this.option.group);
    }
  },
  methods: {
    init() {
      //1.初始化实例
      this.myChart && this.myChart.dispose();
      this.myChart = this.$echarts.init(this.$refs.chartsRef);
      // console.log(this.$refs.chartsRef)
      //2.绘制
      this.myChart.setOption(this.option);
      if (this.option.group) {
        this.myChart.group = this.option.group;
        this.$echarts.connect(this.option.group);
      }
    },
    setOption(option) {
      this.myChart.setOption(option, true);
    },
    echartsResize() {
      if (this.myChart) this.myChart.resize();
    },
  },
  watch: {
    option: {
      handler(nev) {
        this.setOption(nev);
      },
      deep: true,
    },
  },
};
</script>

<style scoped lang="less">
.charts{
  height:100%;
  width: 100%;
}</style>
